| JS DOM操作（创建、遍历、获取、操作、删除节点） | 您所在的位置：网站首页 › 创建 JavaScript 操作 › JS DOM操作（创建、遍历、获取、操作、删除节点） |
JS DOM操作（创建、遍历、获取、操作、删除节点）
|
创建节点 create方法 myReady(function(){ // 创建注释节点 var comment = document.createComment("A comment"); // 创建文档片段 var fragment = document.createDocumentFragment(); var ul = document.getElementById("myList"); var li = null; for (var i = 0; i < 3; i++){ // 创建元素节点 li = document.createElement("li"); // 添加创建好的文本节点 li.appendChild(document.createTextNode("Item " + (i+1))); fragment.appendChild(li); } ul.appendChild(fragment); // 插入注释节点 document.body.insertBefore(comment, document.body.firstChild); });html5shiv (function() { if (! /*@cc_on!@*/ 0) return; var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(', '); var i = e.length; while (i--){ document.createElement(e[i]); } })();创建节点createElement： 它的的参数可以是大小也可以是小写，但是多数情况下我们使用小写 document.createElement()创建的HTML5标签是可以兼容IE8以下的浏览器的
高效创建节点innerHTML-outerHTML // innerHTML的限制： // 字符串最左边不能出现空白，否则会被移除 // 多数浏览器不会对script脚本进行执行 // 不能单独创建meta/style/link等 myReady(function(){ var content = document.getElementById("content"); var str = "This is a paragraph with a list following it. " + "" + "Item 1" + "Item 2" + "Item 3" + ""; content.innerHTML = str; alert(content.innerHTML); });多数浏览器不会对script脚本进行执行 解决：添加defer属性 放在有作用域的元素之后 var content = document.getElementById("content"); var str = "alert('hi');"; content.innerHTML = str; });创建style时解决IE兼容 var content = document.getElementById("content"); var str = "_body {background-color: red; }"; content.innerHTML = str; // 移除最开头添加的_ content.removeChild(content.firstChild); });innerText // innerText兼容火狐写法：textContent var content = document.getElementById("content"); function getInnerText(element){ return typeof (element.textContent == "string") ? element.textContent : element.innerText; } function setInnerText(element, text){ if (typeof element.textContent == "string"){ element.textContent = text; } else { element.innerText = text; } } setInnerText(content, "Hello world!"); console.log(getInnerText(content));节点遍历（查找节点） dom Tree walker myReady(function(){ // documentElement返回文档根节点 var oHtml = document.documentElement; var p = document.getElementById("paragraph"); var txt = p.childNodes[0]; // 获取head节点三种方法 var oHead = oHtml.firstChild; var oHead = oHtml.childNodes[0]; var oHead = oHtml.childNodes.item(0); // 获取body节点的两种方法 var oBody = oHtml.childNodes.item(1); var oBody = oHtml.childNodes[1]; console.log(oHead.parentNode == oHtml); console.log(oBody.parentNode == oHtml); // 上一个兄弟元素 console.log(oBody.previousSibling == oHead); // 下一个兄弟元素 console.log(oHead.nextSibling == oBody); console.log(oBody); console.log(oHead); console.log(oHtml.tagName);//HTML // 通过p节点找到document节点 console.log(p.ownerDocument == document); // 是否有子节点 console.log(p.hasChildNodes()); console.log(txt.hasChildNodes()); });文本叶子节点
输出分别是：false/true/false 1、 首先区分firstChild和childNodes的区别 firstChild表示第一个子节点， 这个子节点包括元素节点，文本节点或者注释节点 childNodes 返回节点的子节点集合，包括元素节点、文本节点还有属性节点。 2、分析这题的代码 第一个ul的第一个子节点是一个空的文本节点，也就是ul和li的换行，他是没有子节点的，所以为false 第一个ul的第二个子节点是第一个li，有子节点，所以为true 第二个ul的第一个li，没有子节点，所以为false
打印HTML结构树： DOM Travel myReady(function(){ var s = ""; // space存储节点间分隔的字符串 // node保存遍历的当前节点 function travel(space, node) { if (node.tagName) { // 如果当前节点是标签，不是空的，就拼接字符串 s += space + node.tagName + ""; } var len = node.childNodes.length; //保存当前节点的子节点的个数 for (var i = 0; i < len; i++) { //遍历节点的子节点 // 递归调用travel() travel(space + "|-", node.childNodes[i]); } } travel("", document); document.write(s); });
解决空白节点问题方法一： 1 元素节点 2 属性节点 3 文本节点 var box = document.getElementById("box"); for(var i = 0, len = box.childNodes.length; i < len; i++) { if (box.childNodes[i].nodeType == 1) { // 只输出元素节点（过滤文本节点） console.log(box.childNodes[i]); } }解决空白节点问题方法二： firstElementChild第一个元素节点 lastElementChild nextElementSibling下一个兄弟元素节点 previoustElementSibling childElementCount 所有直接子元素节点的个数 var box = document.getElementById("box"); for(var i = 0, len = box.childElementCount; i < len; i++) { console.log(box.children[i]); }类数组对象nodeList 类数组对象无法使用数组方法 将类数组对象转为数组 NodeList对象的特点 myReady(function(){ var box = document.getElementById("box"); var nodes = box.childNodes; // 类数组对象无法使用数组方法 console.log(nodes); console.log(nodes[1]); nodes.push("节点四"); // 将类数组对象转为数组兼容IE的写法 function makeArray(nodeList){ var arr = null; try { // 将类数组对象转为数组 return Array.prototype.slice.call(nodeList); }catch (e){ arr = new Array(); for(var i = 0, len = nodeList.length; i < len; i++){ arr.push(nodeList[i]); } } return arr; } var newNodeList = makeArray(nodes); newNodeList.push("节点四"); console.log(newNodeList); }); 节点一 节点二 节点三类数组对象HTMLCollection 类数组对象HTMLCollection myReady(function(){ var scripts = document.scripts; var links = document.links; // 表格元素 var cells = document.getElementById("tr").cells; // var imgs = document.images; var forms = document.forms; var options = document.getElementById("select").options; var ps = document.getElementsByTagName("p"); console.log(scripts); console.log(links); console.log(cells); // console.log(imgs); console.log(forms); console.log(options); console.log(ps); //HTMLCollection对象的namedItem()方法 //返回集合中具有指定name属性或id属性的元素 console.log(cells.namedItem('td')); }); 节点一 节点二 节点三 第一行 第二行 第三行 忘记密码 更多内容 北京 天津 河北DOM探索之基础详解篇 DOM探索之节点操作篇 类数组对象NamedNodeMap 返回attr属性相关信息 类数组对象NamedNodeMap myReady(function(){ var box = document.getElementById("box"); var attrs = box.attributes; console.log(attrs); console.log(attrs.length); console.log(attrs[0]); console.log(attrs.item(1)); }); 节点一 节点二 节点三类数组对象具有动态性 var divs = document.getElementsByTagName("div"); // 先把最初的长度记录在变量里，防止后期动态改变 var length = divs.length; var i = 0; while(i |
【本文地址】
公司简介
联系我们